import React, { memo, useState, useEffect } from "react";
import { CheckSongBoxShowStyle } from "./style";
import SongBox from "@/components/songPageComment/songPopover";

export default memo(function CheckSongBoxShow(props) {
  const [SongBoxIsShow, setSongBoxIsShow] = useState(false);

  useEffect(() => {
    document.addEventListener("click", (event) => {
      event.stopImmediatePropagation();
      setSongBoxIsShow(false);
    });
  }, [SongBoxIsShow]);
  const songBoxShow = (e) => {
    e.nativeEvent.stopImmediatePropagation();
    setSongBoxIsShow(!SongBoxIsShow);
  };
  const gotoOne = () => {
    props.getPage(1);
  };

  return (
    <CheckSongBoxShowStyle>
      <div className="songBox-title">
        <p className="fl">
          {props.props.location.pathname.split("/")[3] == undefined ||
          props.props.location.pathname.split("/")[3] == ""
            ? "全部"
            : props.props.location.pathname.split("/")[3]}
        </p>
        <a onClick={(e) => songBoxShow(e)} className="songBox-all button2">
          <span className="button2">
            选择分类<em></em>
          </span>
        </a>
        <SongBox gotoOne={gotoOne} isShow={SongBoxIsShow} />
        <div className="songBox-hot btn-button fr">
          <span>热门</span>
        </div>
      </div>
    </CheckSongBoxShowStyle>
  );
});
